<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <link rel="stylesheet" href="/static/css/wepayui.min.css">
    <link rel="stylesheet" href="/static/css/pay.css">
    <link rel="stylesheet" href="/static/css/keyboard.css">
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
    <title>向商家付款</title>
</head>
<body ontouchstart class="weui-wepay-pay-wrap">
<div class="weui-wepay-pay">
    <div class="weui-wepay-pay__bd">
        <div class="weui-wepay-pay__inner">
            <div class="weui-cell weui-cells__tips">
                <div style="display:flex;">
                    <div class="shop-icon">
                        <i class="iconfont icon-dianpu color-white"></i>
                    </div>
                    <div class="shop-name">
                        {$shopName}
                    </div>
                </div>
            </div>
            <div class="weui-cell weui-wepay-pay__inputs"><strong class="weui-wepay-pay__strong">￥</strong>
                <input id="paymoney" type="text" class="weui-wepay-pay__input" placeholder="请输入金额"></div>
            <div class="weui-cell weui-cell_active remark">
                <div class="weui-cell__hd">备注：</div>
                <div class="weui-cell__bd weui-flex" id="remark" style="color: #999999"></div>
            </div>
        </div>

    </div>
    <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-cell_active weui-check__label" for="x12">
            <div class="weui-cell__bd">
                <p><i class="iconfont icon-zhifubao" style="color:#06B4FD; font-size: 18px"></i> 支付宝支付</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
                <span class="weui-icon-checked"></span>
            </div>
        </label>
    </div>
    <div class="weui-wepay-pay__ft">
        <p class="weui-wepay-pay__info"></p>
    </div>
</div>
<!--提示框开始-->
<div id="warnToast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-warn weui-icon_toast" style="font-size: 38px"></i>
        <p class="weui-toast__content" id="errMsg"></p>
    </div>
</div>
<!--提示框结束-->
<!--备注框开始-->
<div class="js_dialog" id="iosDialog1" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">订单备注</strong></div>
        <div class="weui-dialog__bd">
            <div class="weui-cell weui-cell_active">
                <div class="weui-cell__bd">
                    <input id="info" class="weui-input" placeholder="在此填写备注">
                </div>
            </div>
        </div>
        <div class="weui-dialog__ft">
            <a href="javascript:" class="weui-dialog__btn weui-dialog__btn_default cancel">取消</a>
            <a href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary remark_submit">确认</a>
        </div>
    </div>
</div>
<!--备注框结束-->
<!--键盘开始-->
<div class="payinfo">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td class="paynum">1</td>
            <td class="paynum">2</td>
            <td class="paynum">3</td>
            <td id="pay-return"><i class="iconfont icon-Backspace"></i></td>
        </tr>
        <tr>
            <td class="paynum">4</td>
            <td class="paynum">5</td>
            <td class="paynum">6</td>
            <td rowspan="3">
                <button class="pay disable" disabled="disabled">支付</button>
            </td>
        </tr>
        <tr>
            <td class="paynum">7</td>
            <td class="paynum">8</td>
            <td class="paynum">9</td>
        </tr>
        <tr>
            <td id="pay-zero" colspan="2">0</td>
            <td id="pay-float">.</td>
        </tr>
    </table>
</div>
<!--键盘结束-->
</body>
<script src="/static/js/jquery.js"></script>
<script type="text/javascript">
    $(function () {
        $(".payinfo").slideDown();
        var $paymoney = $("#paymoney");

        $(".remark").click(function () {
            $('#iosDialog1').show();
        });

        $('.cancel').click(function () {
            $('#info').val('');
            $('#iosDialog1').hide();
        })

        $('.remark_submit').click(function () {
            $('#remark').html($('#info').val());
            $('#iosDialog1').hide();
        })


        $("#paymoney").focus(function () {
            document.activeElement.blur(1); //禁止虚拟键盘弹出
            $(".payinfo").slideDown();
        });

        $(".paynum").each(function () {
            $(this).click(function () {
                if (($paymoney.val()).indexOf(".") != -1 && ($paymoney.val()).substring(($paymoney.val()).indexOf(".") + 1, ($paymoney.val()).length).length == 2) {
                    return;
                }
                if ($.trim($paymoney.val()) == "0") {
                    return;
                }
                $paymoney.val($paymoney.val() + $(this).text());
                check($paymoney.val())

            });
        });

        $("#pay-return").click(function () {
            $paymoney.val(($paymoney.val()).substring(0, ($paymoney.val()).length - 1));
            check($paymoney.val())
        });

        $("#pay-zero").click(function () {
            if (($paymoney.val()).indexOf(".") != -1 && ($paymoney.val()).substring(($paymoney.val()).indexOf(".") + 1, ($paymoney.val()).length).length == 2) {
                return;
            }
            if ($.trim($paymoney.val()) == "0") {
                return;
            }
            $paymoney.val($paymoney.val() + $(this).text());
            check($paymoney.val())
        });

        $("#pay-float").click(function () {
            if ($.trim($paymoney.val()) == "") {
                return;
            }

            if (($paymoney.val()).indexOf(".") != -1) {
                return;
            }

            if (($paymoney.val()).indexOf(".") != -1) {
                return;
            }
            $paymoney.val($paymoney.val() + $(this).text());
            check($paymoney.val())
        });

        //验证金额
        function check(price) {
            var priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
            if (priceReg.test(price) && price > 0) {
                $(".pay").removeClass('disable');
                $(".pay").removeAttr('disabled');
            } else {
                $(".pay").addClass('disable');
                $(".pay").attr("disabled", true);
            }
        }
        $(".pay").click(function () {
            var price = $paymoney.val();
            var remark = $('#remark').html()
            $.post('/qrpay', {price: price, remark: remark, sid: "{$sid}"}, function (e) {
                if (0 == e.code) {
                    $('#errMsg').html(e.message);
                    showToast();
                } else if (1 == e.code) {
                    ap.tradePay({
                        tradeNO: e.data.trade_no
                    }, function (res) {
                        if (6001 == res.resultCode) {
                            AlipayJSBridge.call('toast', {
                                content: '取消支付',
                                type: 'fail'
                            })
                        } else if (9000 == res.resultCode) {
                            //跳转？
                            ap.redirectTo({
                                url: '/pay_result',
                                data: {
                                    amount: price,
                                    shopName: '{$shopName}',
                                    uid: e.data.uid,
                                    orderNo: e.data.order_no
                                }
                            });
                            // AlipayJSBridge.call('exitApp');
                        } else {
                            AlipayJSBridge.call('toast', {
                                content: '网络繁忙',
                                type: 'exception'
                            })
                        }
                    });
                }
            });
        });

        function showToast() {
            var $warnToast = $('#warnToast');
            if ($warnToast.css('display') != 'none') return;
            $warnToast.fadeIn(100);
            setTimeout(function () {
                $warnToast.fadeOut(100);
            }, 2000);
        }
    });
</script>
</html>

